<template>
  <lay-container fluid="true" style="padding: 10px">
    <lay-row>
      <lay-col :md="24">
        <lay-card>
          <SearchForm :form-config="formConfig" @submit="onSearch"></SearchForm>
        </lay-card>
      </lay-col>
      <lay-row space="0">
        <lay-col md="24">
          <lay-card>
            <lay-loading :type="2" :loading="loading">
              <lay-table :columns="merchantPN.columns" :dataSource="dataList" :default-toolbar="defaultToolbar" resize
                even>
                <template v-slot:toolbar>
                  <lay-button size="sm" type="primary" @click="addWindow('new', null)">新增</lay-button>
                  <lay-button size="sm" type="primary" @click="getPageData">刷新</lay-button>
                </template>
                <template v-slot:index1="{ data }">{{ data.index1 }}</template>
                <template v-slot:operator="{ data }">
                  <lay-button size="xs" type="primary" @click="addWindow('up', data)">编辑</lay-button>
                </template>
                <template v-slot:footer>
                  <lay-page v-model="page.current" :limit=page.limit :total=page.total :show-page="true" showCount
                    showSkip :limits="[3, 10, 20, 30, 40, 50, 100]" :pages="6" @change="change"></lay-page>
                </template>
              </lay-table>
            </lay-loading>
          </lay-card>
        </lay-col>
      </lay-row>
    </lay-row>
  </lay-container>
  <sonWindow ref="sonWindowRef" @topClick="topFn" />
</template>

<script setup lang="ts">

import { ref, onMounted } from 'vue';
import MyModal from './MyModal.vue'
import sonWindow from "./module/indexWindow.vue";
import { layer } from '@layui/layui-vue';
import { getSupList } from '@/api/module/user';
import MerchantPN from './indexPN';

const merchantPN = new MerchantPN;

const page = ref({
  total: 0,//总行数
  limit: 3,//每页行数
  current: 1,//页码
  SearchField: 'name',//默认搜索字段
  SearchOperator: 'LIKE',//默认搜索查询表达式
  SearchaAtistop: "",//默认搜索关键词
  SearchaSort: 'DESC',//默认搜索排序方式ASE,DESC升降序
  SearchaSortField: 'id',//默认排序字段
});
const loading = ref(false);
const defaultToolbar = ref(true);
const dataList = ref([]); //展示数据

//监听子组件
const topFn = function (db: any) {
  console.log("我的父组件中的方法", db);
  getPageData()
};

//查询空间参数
const formConfig = [
  {
    type: 'input',
    label: '名称',
    name: 'name',
    placeholder: '请输人名称',
  },
  {
    type: 'datePicker',
    label: '单选时间',
    name: 'time',
    mode: 'year'
  },
  {
    type: 'datePicker',
    label: '范围时间',
    name: 'timeRange',
    range: true,
  },
  {
    type: 'select',
    label: '选项单选',
    name: 'select',
    options: [
      { label: '密码登录', value: 'PASSWORD' },
      { label: '验证码登录', value: 'CODE' },
      { label: '免密登录', value: 'SAFE' },
    ],
  },
  {
    type: 'select',
    label: '选项多选',
    name: 'selectMultiple',
    multiple: true,
    minCollapsedNum: 1,
    options: [
      { label: '密码登录', value: 'PASSWORD' },
      { label: '验证码登录', value: 'CODE' },
      { label: '免密登录', value: 'SAFE' },
    ],
  },
];

//查询方法
const onSearch = (formData: any) => {
  console.log('父组件', formData.value);
};

const change = function ({ current, limit }: any) {
  console.log("当前页码:" + current + " 每页数量:" + limit);
  page.value.current = current;//当前页码
  page.value.limit = limit;//每页数量
  getPageData();
};

//获取表格数据
const getPageData = async () => {
  loading.value = true;
  const { code, db: res } = await getSupList(page.value)
  loading.value = false;
  console.log("shuju:", code, res);
  if (code == 200) {
    dataList.value = res.data
    page.value.total = res.total
  }
}

const sonWindowRef = ref<InstanceType<typeof MyModal> | null>(null)
// 打开弹窗
const addWindow = function (op: string, data: any) {
  console.log("打开弹窗", op, data);
  sonWindowRef.value?.childFun(op, data);//子组件方法
};

onMounted(() => {
  getPageData();

})

</script>

<style scoped></style>